<template>
  <div>
    <h1>{{msg}}</h1>
    <button @click="time">逆转事件</button>

    <button @click="qingchu">停止</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg:'hello vue hahha',
        t:null,
        arr:null
    }
  },
  methods:{

    time(){
        if(this.t) return
          this.t=setInterval(()=>{


           this.arr=this.msg.split('')
            this.arr.push(this.arr.shift())
            this.msg =this.arr.join('')
 

    },100)
    },

    qingchu(){
      clearInterval(this.t)
      this.t = null
    }
    
  }
}
</script>

<style scoped lang='less'>

</style>